<!--
 * @Author: Your Name you@example.com
 * @Date: 2023-05-18 15:04:14
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2023-05-23 18:18:49
 * @FilePath: \anywhere-app\src\views\equipment\dt\dtEquipmentDetails.vue
-->
<template>
  <div class="dt-equipment-box">
    <div class="search-box">
      <DtSearch :exports-count="count"
                @updateCount="updateCount"
                @search="sonSearch" />
    </div>
    <div class="table-box">
      <DtTable :table-data="tableData"
               :loading="loading"
               @exportExecl="exportExecl"
               @handleSwitch="handleSwitch" />
      <el-pagination v-show="tableData.length > 0"
                     class="pagination-box"
                     :current-page="paginationForm.page"
                     :page-sizes="pageSizeOptions"
                     :page-size="paginationForm.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import DtSearch from "./components/DtSearch.vue"
import DtTable from "./components/DtTable.vue"
import { mapActions } from "vuex";
import { dtEquipment } from "@/api/index";

const getUrlPops = () => {
  const getqys = new URLSearchParams(window.location.search)
  const pops = Object.fromEntries(getqys.entries())
  return pops
}

export default {
  name: 'DtEquipmentDetails',
  components: { DtSearch, DtTable },
  data () {
    return {
      pageSizeOptions: [10, 20, 50, 100, 200, 500],
      total: 0,
      paginationForm: {
        page: 1,
        size: 10,
        inHome: 2,
        factoryCode: getUrlPops().factoryCode || null,
        status: ""
      },
      loading: false,
      timer: null,
      count: 0,
      tableData: [],
      frameParams: getUrlPops()
    }
  },
  mounted () {
    this.$nextTick(() => {
      const { tenantId, userId, token } = this.frameParams
      sessionStorage.setItem("dtUseToken", token);
      if (tenantId || userId) {
        this.loading = true
        this.getDtUrlParams({ params: this.paginationForm }).then(item => {
          this.tableData = item?.records
          this.total = item?.total
          this.loading = false
        })
      } else {
        this.search(this.paginationForm)
      }
    })
    // window.addEventListener('message', function (e) {
    //   this.frameParams = e?.data
    //   console.log('子页面接收传过来的参数', e.origin, e.data)
    // })
  },
  methods: {
    ...mapActions({
      getDtUrlParams: "dtEquipment/getDtUrlParams",
      updateExportsCount: "dtEquipment/updateExportsCount"
    }),
    async search (data) {
      this.loading = true
      let response = await dtEquipment.getDeviceData(data)
      if (response.data?.code === 0) {
        const { data } = response?.data
        this.tableData = data?.records
        this.total = data?.total
        this.loading = false
      }
    },
    sonSearch (data) {
      this.searchFilter = data
      this.paginationForm.page = 1
      this.search({ ...this.paginationForm, ...this.searchFilter })
    },
    handleSizeChange (size) {
      this.paginationForm.size = size
      this.search({ ...this.paginationForm, ...this.searchFilter })
    },
    handleCurrentChange (curren) {
      this.paginationForm.page = curren
      this.search({ ...this.paginationForm, ...this.searchFilter })
    },
    handleSwitch () {
      this.search({ ...this.paginationForm, ...this.searchFilter })
    },
    async exportExecl () {
      let params = {
        args: { ...this.paginationForm, ...this.searchFilter },
        name: "设备管理",
        type: 5
      };
      await dtEquipment.getExportTask(params)
      this.searchCount()
      this.$nextTick(() => {
        this.$message.success("导出功能正在后台执行中，请稍后去“导出文件”下载中查看！");
      });
    },
    async searchCount () {
      let response = await dtEquipment.getSearchCount({ downloaded: 0 })
      if (response.data.code === 0) {
        this.count = response.data.data
        this.updateExportsCount({ count: response.data.data })
      }
    },
    updateCount () {
      this.searchCount()
    }
  }
}
</script>

<style scoped>
.search-box {
  height: 52px;
  margin-bottom: 7px;
  background: var(--prev-bg-white);
  padding: 20px 20px 0px 20px;
}
.table-box {
  height: calc(100vh - 72px);
  background: var(--prev-bg-white);
  padding: 20px;
}
.pagination-box {
  text-align: right;
  padding-top: 10px;
}
</style>